<template>
  <div class="container">
    <ul class="recent-news">
      <li
        class="news-item"
        @click="toNewsDetail(item.id)"
        v-for="item in noticeList.records"
        :key="item.id"
      >
        <div class="news-item-title">{{ item.title }}</div>
        <div class="news-item-date">{{ item.publishTime }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {};
  },
  onLoad() {},
  async created() {
    await this.getnoticeList();
  },
  computed: {
    ...mapState({
      noticeList: (state) => state.recentNews.noticeList,
    }),
  },
  methods: {
    ...mapActions({
      getnoticeList: "recentNews/getnoticeList",
    }),
    toNewsDetail(id) {
      console.log(id, "++++++++++++++++++++++++++++++++++++++");
      uni.navigateTo({
        url: `/pages/recent-news/detail?id=${id}`,
      });
    },
  },
};
</script>

<style scoped>
.container {
  height: 100%;
  box-sizing: border-box;
  color: #333;
  font-family: helvetica, "Heiti SC", PingFangSC-Light;
}
.recent-news {
  background: #fff;
}
.recent-news .news-item {
  padding: 20rpx 20rpx 0 20rpx;
  position: relative;
}
.recent-news .news-item .news-item-title {
  font-size: 29rpx;
  text-align: left;
}
.recent-news .news-item .news-item-date {
  font-size: 24rpx;
  color: #999;
  text-align: right;
  margin-top: 10rpx;
  margin-bottom: 20rpx;
}
.recent-news .news-item::after {
  content: " ";
  width: 100%;
  height: 2rpx;
  background-color: #e1e1e1;
  left: 20rpx;
  display: block;
  position: absolute;
}
</style>
